import s from './style.module.less'
import { useEffect, useState } from 'react'
import { get } from '../../utils'
import cx from 'classnames'
import { useNavigate } from 'react-router-dom'
const Connect = () => {
    const [list, setList] = useState([
        {
            id: 1,
            name: '新的朋友',
            title: '新的朋友',
            avatar: 'http://127.0.0.1:7001/static/connect/xin.png'
        }
    ])
    const [active,setActive]=useState(0)

    useEffect(() => {
        GetMe()
    }, [])
    async function GetMe() {
        let { data } = await get(`/api/connect`)
        setList(data.list)
    }
    const navigate=useNavigate()
    const handleButton=(id:number)=>{
        setActive(id)
        navigate(`/chat?id=${id}`)
        
    }
    return <>
        <div className={s.connect}>
            <div className={s.head}>
                <div className={s.head_title}>联系人</div>
                <input className={s.head_input} type="text" placeholder="搜索" />
            </div>
            <div className={s.container}>
                {list.map(i => <div key={i.id} className={cx({[s.item]:true,[s.active]:i.id===active})} onClick={()=>handleButton(i.id)}>
                    <p >{i.title}</p>
                    <div className={s.item_an}>
                        <img src={i.avatar}></img>
                        <div>{i.name}</div>
                    </div>

                </div>)}
            </div>
           
        </div>
        
    </>
}
export default Connect